<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="__STATIC__/plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all">
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<form method="POST" action="{:url('question/add')}" accept-charset="UTF-8" class="layui-form">
    <br/>
    <div class="layui-form-item">
        <div class="layui-form-item">
        <label class="layui-form-label">问题</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输标题" class="layui-input">
        </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <select lay-filter="select_type" name="type"  lay-verify="required" title="类型选择" >
                <option value="">选择类型</option>
                <option value="radio">单选</option>
                <option value="checkbox">多选</option>
                <option value="textarea">文本</option>
                <option value="text">输入框</option>
                <option value="table">矩阵</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item multi hide">
        <label class="layui-form-label">选项分数:</label>
        <div class="layui-input-inline">
            <input class="layui-input" lay-verify="required|number" name="feng[]" type="text">
        </div>
        <div class="layui-form-mid">&ensp;&ensp;&ensp;</div>
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline"><input class="layui-input"  lay-verify="required" placeholder="显示" name="ext[]" type="text" value="">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-sm layui-btn-primary add" type="button">添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger remove" type="button">删除</button>
            </div>
        </div>
    </div>
    <div class="layui-form-item table hide" style="margin-left: 50px;">
        <table  lay-filter="demo">
            <thead>
                <tr>
                    <th></th>
                    <th class="edit_text" data-value="0">显示1</th>
                    <th class="edit_text" data-value="1">显示2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="edit_text">选项1</td>
                    <td><input title=" " type="radio" checked></td>
                    <td><input title=" " type="radio" checked></td>
                </tr>
                <tr>
                    <td class="edit_text">选项2</td>
                    <td><input title=" "  type="radio" checked></td>
                    <td><input  title=' ' type="radio" checked></td>
                </tr>
            </tbody>
        </table>
        <button type="button" class="lay-btn layui-btn-primary" id="add_col" >增加列</button>
        <button type="button" class="lay-btn layui-btn-primary" id="add_row">增加行</button>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
            <button class="layui-btn layui-btn-primary" type="reset" id="reset">取消</button>
        </div>
    </div>
</form>
</body>
</html>
<script>
    layui.use(['form','layer','table'], function () {
        function addRow(){
            $('#add_col').click(function(){
                var div=$('.table');
                var tbody=div.find('table tbody');
                var tr=tbody.find('tr:last-child').clone();//不知道为会选择到2个..
                tbody.append(tr);
            })
        }
        function addCol(){
            $('#add_row').click(function(){
                var table=$('.table');
                var tr=table.find('tr');
                tr.each(function(i,elem){
                    var th=$(elem).find('th:last-child');
                    if(th.length){
                        var clone=th.clone();
                        $(elem).append(clone);
                    }else{
                        var td=$(elem).find('td:last-child');
                        var clone=td.clone();
                        $(elem).append(clone);
                    }
                })
            })
        }
        function editText(){
            $('table').on('click','.edit_text',function(e){
                var tag=$(e.target);
                console.log(tag.data('value'));
                var need=tag.data('value')!==undefined?1:0;
                var text= need?tag.text()+','+(tag.data('value')?tag.data('value'):'0'):tag.text();
                layer.prompt({
                    formType: 2
                    ,title: '修改'
                    ,value:text
                }, function(value, index){
                    value=value.split(',');
                    if(need && value.length!=2){
                        layer.msg('请输入 显示名称(逗号)值');
                        return '';
                    }
                    var a=value[0];
                    var b=value[1];
                    tag.text(a).data('value',b);
                    layer.close(index);
                });
            })
        }


         function selectChange() {
             form.on('select(select_type)', function (data) {
                 var type = $(data.elem).val();
                 if (type == 'textarea'|| type=='text') {
                     $('.multi').addClass('hide').find('input').removeAttr('lay-verify');
                     $('.table').addClass('hide');
                 } else if(type=='table') {
                     $('.multi').addClass('hide').find('input').removeAttr('lay-verify');
                     $('.table').removeClass('hide')
                 }else{
                     $('.multi').removeClass('hide').find('input').attr('lay-verify','required');
                     $('.table').addClass('hide');
                 }
             })
         }
         function addClick() {
             $('form').on('click','.add',function (e) {
                e.preventDefault();
                 var l = $(this).parents('div.layui-form-item.multi');
                 console.log(this);
                 console.log(l);
                 var clone = l.clone();
                 clone.find('input').val('');
                 l.after(clone);
             });
         }

         function removeClick() {
             $('form').on('click','.remove',function (e) {
                 e.preventDefault ();
                 if($('div.layui-form-item.multi').length>1){
                     $(this).parents('div.layui-form-item.multi').remove();
                 }
             })
         }

         function submit() {
             form.on('submit(formDemo)', function (data) {
                 var form=$(data.form);
                 if($('select').val()=='table'){
                     var sa=form.serializeArray();
                     var table_data=[];
                     $('th.edit_text').each(function(i,elem){
                         table_data.push({name:'th[]',value:[$(elem).text(),$(elem).data('value')]});
                     });
                     $('td.edit_text').each(function(i,elem){
                         table_data.push({name:'td[]',value:$(elem).text()});
                     });
                     sa=sa.concat(table_data);
                     console.log($.param(sa));
                     post_data=$.param(sa);
                 }else{
                     var post_data=form.serialize();
                 }
                 $.post(form.attr('action'),post_data,function(response){
                     if(response.code==0){
                         var index=parent.layer.getFrameIndex(window.name);
                         setTimeout(function(){parent.layer.close(index)},1000);
                     }
                     layer.msg(response.msg);
                 });
                 return false;
             });
             $('#reset').click(function(){
                 var index=parent.layer.getFrameIndex(window.name);
                 parent.layer.close(index);
             })
         }

         var form = layui.form;
         window.$ = layui.$;
         $(function () {
             addClick();
             removeClick();
             selectChange();
             editText();
             addRow();
             addCol();
             submit();
         });
    });
</script>
